<template>
	<div class="search">
		<van-nav-bar title="绣魂" left-text="返回" left-arrow @click-left="onClickLeft">
		  <template #right>
		    <van-icon name="search" siza="20"/>
		  </template>
		</van-nav-bar>
		<!-- 搜索栏 -->
		<form action="/">
		  <van-search
		    v-model="value"
		    show-action
		    placeholder="请输入搜索关键词"
		    @search="onSearch"
		    @cancel="onCancel"
		  />
		</form>
		
		<!-- 内容刷新 -->
		<van-pull-refresh
		  v-model="isLoading"
		  success-text="刷新成功"
		  @refresh="onRefresh"
		>
		  <div class="count"> {{ count }}</div>
		</van-pull-refresh>
	</div>	
	
</template>

<script>
	import { Toast } from 'vant';
	export default{
		name:"Search",
	    data(){
			return{
				value:'',
				count: '刷新内容',
				isLoading: false,
			};
		},
		methods: {
			onSearch(val) {
				// data().count='123';
		       Toast(val);
		     },
		     onCancel() {
		       Toast('取消');
		     },
			 onClickLeft() {
			      // Toast('返回');
			 	  this.$router.push('First');
			},
			onRefresh() {
				setTimeout(() => {
					Toast('刷新成功');
					this.isLoading = false;
				}, 1000);
			},
		},
		
	}
</script>

<style scoped>
	.search{
		background-color: #FAFAFA;
		height:600px;
		
	}
	.van-search{
		background-color: #FAFAFA;
	}
	/* van-pull-refresh{
		height:600px;
	} */
	.count{
		height:550px;
	}
</style>
